<template>
  <div class="plan_detail">
    <BaseNavBar title="计划详情" :is-nav="true" />
    <main class="plan_detail_main">
      <div class="plan_detail_content">
        <Card>
          <section class="plan_detail_content_item">
            <section class="plan_detail_content_item_title">
              计划名称：{{ plan?.title }}
            </section>
            <section class="plan_detail_content_item_text">
              计划内容：{{ plan?.content }}
            </section>
            <section class="plan_detail_content_item_priority">
              优先级：
              <span  style="color: #f50;" v-if="plan?.priority === 3">高</span>
              <span  style="color: coral;" v-if="plan?.priority === 2">中</span>
              <span  style="color: forestgreen;" v-if="plan?.priority === 1">低</span>
            </section>
            <section class="plan_detail_content_item_status">
              状态： <van-tag plain type="warning" v-if="plan?.status === 1">开启</van-tag>
              <van-tag plain type="success" v-if="plan?.status === 2">关闭</van-tag>
            </section>
            <section class="plan_detail_content_item_date">
              计划开始时间：{{ plan?.planStartDate }} ~ {{ plan?.planStartTime }}
            </section>
            <section class="plan_detail_content_item_date">
              计划结束时间：{{ plan?.planEndDate }} ~ {{ plan?.planEndTime }}
            </section>
          </section>
        </Card>
      </div>

      <van-dialog v-model:show="show" title="新增计划" show-cancel-button @confirm="handleConfirm" @cancel="handleCancel">
      <van-form>
        <van-cell-group inset>
          <van-field name="priority" label="优先级">
            <template #input>
              <van-radio-group  v-model="formState.priority" direction="horizontal" shape="dot">
                <van-radio  :name="1" icon-size="16px">低</van-radio>
                <van-radio :name="2" icon-size="16px">中</van-radio>
                <van-radio :name="3" icon-size="16px">高</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="priority" label="状态">
            <template #input>
              <van-radio-group  v-model="formState.status" direction="horizontal" shape="dot">
                <van-radio  disabled :name="1" icon-size="16px">开启</van-radio>
                <van-radio :name="2" icon-size="16px">关闭</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </van-dialog>
    </main>

    <footer class="action">
      <van-button class="action_button" type="primary" block round @click="handleEditPlan">编辑计划</van-button>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {showToast} from 'vant';
import Card from '@/components/Card/index.vue';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import { getPlanDetail,editPlan } from '@/apis/plan';


const route = useRoute();


const plan = ref({});

const formState = ref({
  priority:"",
  status:"",
});

const show = ref(false);

const handleEditPlan = () =>{
    show.value = true;
};


const handleCancel = () => {
    show.value = false;
    init();
};

const handleConfirm = async () => {
  try {
    const res = await editPlan({
      ...plan.value,
      ...formState.value,
    });
    if(res?.code === 200){
      init();
      showToast('修改成功');
      return;
    }
    showToast(res?.msg)
  } catch (error) {
    console.log(error, 'edit-plan-error');

  }
};

const init = async () => {
  try {
    const res = await getPlanDetail(route.params?.id);
    console.log(res, '计划详情');
    plan.value = res.data;
    formState.value = {
      priority:res.data?.priority,
      status:res.data?.status,
    };

  } catch (error) {
    console.log(error, 'get-plan-detail-error');

  }
};

onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.plan {
  &_detail {
    &_main {
      margin-top: 16px;
    }

    &_content {
      width: 96%;
      margin: 0 auto;

      &_item {
        box-sizing: border-box;
        padding: 8px;

        &_title {
          font-size: 14px;
          color: #333;
        }

        &_text {
          font-size: 14px;
          color: #666;
        }

        &_date {
          font-size: 14px;
          color: #999;
        }
        &_priority {
          font-size: 14px;
          color: #999;
        }
        &_status {
          font-size: 14px;
          color: #999;
        }
      }

    }
  }
}
.action{
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 16px;
  position: fixed;
  bottom: 8px;
  left: 0;
  &_button{
    height: 36px;
  }
}
</style>
